<template>
	<div class="layout-padding" style="width: 100%">
		<div class="layout-padding-auto layout-padding-view">
			<div>
				<el-row shadow="hover" :gutter="20" class="mb10">
					<el-col :span="6">
						<el-input v-model="input3" placeholder="请输入知识库名称" class="input-with-select">
							<template #append>
								<el-button :icon="Search" />
							</template>
						</el-input>
					</el-col>
					<el-col :span="6">
						<el-button type="primary" round>新增</el-button>
					</el-col>
				</el-row>
			</div>
			<div class="demo-collapse">
				<el-collapse accordion v-model="activeName">
					<el-collapse-item title="常用知识库" name="1">
						<div>
							<el-row :gutter="12">
								<el-col :span="6">
									<el-card shadow="hover"> 知识库1 </el-card>
								</el-col>
								<el-col :span="6">
									<el-card shadow="hover"> 知识库1 </el-card>
								</el-col>
								<el-col :span="6">
									<el-card shadow="hover"> 知识库1 </el-card>
								</el-col>
								<el-col :span="6">
									<el-card shadow="hover"> 知识库1 </el-card>
								</el-col>
							</el-row>
						</div>
					</el-collapse-item>
				</el-collapse>
				<el-divider content-position="left">我的知识库</el-divider>
				<div>
					<el-space wrap :size="50">
						<el-card class="box-card" v-for="item in kpList" :key="item">
							<template #header>
								<div class="card-header">
									<span>{{ item.title }}</span>
									<el-dropdown>
										<span class="el-dropdown-link">
											<el-icon><More /></el-icon>
										</span>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item @click="edit(item.id)">编辑</el-dropdown-item>
												<el-dropdown-item @click="delKp(item.id)">删除</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</div>
							</template>
							<div class="card-content">
								<div class="left">
									<img src="../../../images/book.jpg" />
								</div>
								<div class="right">
									<span>
										{{ item.description }}
									</span>
								</div>
							</div>
							<div class="text item">
								<span>{{ item.createTime }}</span>
							</div>
						</el-card>
					</el-space>
				</div>
				<div class="demo-pagination-block">
					<div class="demonstration"></div>
					<el-pagination
						v-model:current-page="currentPage"
						v-model:page-size="pageSize"
						:page-sizes="[10, 20, 30, 40]"
						:small="small"
						:disabled="disabled"
						:background="background"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalSize"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogVisible" title="删除" width="30%" :before-close="handleClose">
			<span>确定删除吗？</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button
						@click="
							dialogVisible = false;
							tmpId.value = null;
						"
						>取消</el-button
					>
					<el-button type="primary" @click="deleteOneKp()"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="systemMenu" setup>
import { delObj, pageList } from '/@/api/admin/menu';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { ElMessage, ElMessageBox } from 'element-plus';
import { More, Delete, Edit, Search, Share, Upload, Plus } from '@element-plus/icons-vue';
import { list, deletekp } from '/@/api/admin/kp';
// 引入组件
const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const menuDialogRef = ref();
const dialogVisible = ref(false);
const queryRef = ref();
const activeName = ref('1');
const tmpId = ref();
const showSearch = ref(true);
const isExpand = ref(false);
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: pageList, // H
	queryForm: {
		menuName: '',
	},
	isPage: false,
});
const page = reactive({
	current: 1,
	size: 10,
});
const { getDataList, tableStyle } = useTable(state);
const currentPage = ref(1);
const pageSize = ref(10);
const totalSize = ref(0);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const kpList = ref([]);
const input3 = ref('');
const select = ref('');
// 在组件挂载后执行的操作
onMounted(async () => {
	try {
		// 发起后端请求并等待结果
		const result = await list(page);
		// 将后端返回的数据赋值给响应式变量
		totalSize.value = result.data.total;
		kpList.value = result.data.records;
		console.log(1);
		console.log(kpList);
	} catch (error) {
		console.error('Error fetching data:', error);
		// 在实际应用中，你可能希望处理错误，例如显示错误提示或记录日志
	}
});
const delKp = (id: number) => {
	dialogVisible.value = true;
	tmpId.value = id;
};
const handleClose = (done: () => void) => {
	ElMessageBox.confirm('Are you sure to close this dialog?')
		.then(() => {
			done();
		})
		.catch(() => {
			// catch error
		});
};
const edit = (id: number) => {
	console.log(id);
};
// 删除
const deleteOneKp = async () => {
	try {
		const id = tmpId.value;
		const result = await deletekp(id);
		console.log(result);
		console.log(result.code);
		if (result.code === 200) {
			dialogVisible.value = false;
			ElMessage({
				message: `删除成功`,
				type: 'success',
			});
		} else {
			dialogVisible.value = false;
			ElMessage({
				message: `删除失败:` + result.msg,
				type: 'error',
			});
		}
		// 将后端返回的数据赋值给响应式变量
	} catch (error) {
		console.error('Error deleting KP:', error);
	}
};

// 分页
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`);
};
// 分页
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`);
};
// 打开新增菜单弹窗
const onOpenAddMenu = (type?: string, row?: any) => {
	menuDialogRef.value.openDialog(type, row);
};
// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: any) => {
	menuDialogRef.value.openDialog(type, row);
};

//是否禁用删除
const deleteMenuDisabled = (row: any) => {
	return (row.children || []).length > 0;
};

const toggleExpand = (children: any[], unfold = true) => {
	for (const key in children) {
		tableRef.value?.toggleRowExpansion(children[key], unfold);
		if (children[key].children) {
			toggleExpand(children[key].children!, unfold);
		}
	}
};

// 搜索事件
const query = () => {
	state.dataList = [];
	getDataList();
};

// 清空搜索条件
const resetQuery = () => {
	queryRef.value.resetFields();
	state.dataList = [];
	getDataList();
};

// 删除操作
const handleDelete = async (row: any) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await delObj(row.id);
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
</script>
<style>
.example-showcase .el-dropdown-link {
	cursor: pointer;
	color: var(--el-color-primary);
	display: flex;
	align-items: center;
}
/* card样式 */
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 20px;
}

.text {
	font-size: 14px;
}

.item {
	margin-bottom: 10px;
	margin-top: 10px;
	float: right;
}
.item span {
	color: #b9bbbf;
}
.right span {
	color: #b9bbbf;
}

.box-card {
	width: 300px;
}
/* 分页样式 */
.demo-pagination-block + .demo-pagination-block {
	margin-top: 10px;
}
.demo-pagination-block .demonstration {
	margin-bottom: 16px;
}
.image {
	border-right: solid 2px var(--el-border-color);
}
.card-content {
	display: flex;
	width: auto;
	height: 100px;
}
.card-content .left {
	width: 30%;
	border-right: solid 2px var(--el-border-color);
}
.card-content .right {
	width: 70%;
	padding: 3px 5px 3px 10px;
	display: block;
	overflow-wrap: break-word;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
</style>
